<template>
	<view class="main">
		<template v-if="signNotification=='false'">
			<view class="row no-border">
				<view class="head">
					上传签名照
				</view>
				<view class="body">
					<view class="preview-img" v-if="image">
						<view class="item">
							<image :src="imgUrl + image" @tap="previewImage(imgUrl + image)"></image>
							<image @click="isShow=true" class="del" src="/static/image/close.png" mode=""></image>
						</view>
					</view>
					<view class="upload" v-else>
						<!-- <image src="/static/image/project-personnel.png" mode="aspectFit"></image> -->
						<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"
							@touchend="touchend"></canvas>
						<view class="footer">
							<view class="left" @click="finish">保存签名</view>
							<view class="right" @click="clear">清除</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-wrap uni-flex uni-justify-content-c uni-align-items-c">
				<view class="btn" @click="submit">
					确定提交
				</view>
			</view>

			<u-modal v-model="isShow" content="确定删除？" show-cancel-button @confirm="del"></u-modal>
		</template>
		<!-- <web-view v-else-if="signNotification=='true'" :src="pdfUrl"></web-view> -->
	</view>
</template>

<script>
	var x = 20;
	var y = 20;
	import config from '@/common/config.js';
	export default {
		data() {
			return {
				isShow: false,
				imgUrl: '',
				userId: null, //用户ID
				image: '', //用户签名图片
				signNotification: null, //是否签署进场合同
				pdfUrl: '',
				tx: '', //绘图图像
				points: [] //路径点集合 
			}
		},
		onLoad(option) {
			this.ctx = uni.createCanvasContext("mycanvas", this); //创建绘图对象
			//设置画笔样式
			this.ctx.lineWidth = 4;
			this.ctx.lineCap = "round"
			this.ctx.lineJoin = "round"
			this.ctx.fillStyle = "#FFFFFF";
			this.ctx.fillRect(0, 0, 347, 380);
			
			this.userId = option.userId;
			this.imgUrl = config.imgUrl + '/';
			console.log(option.signNotification);
			this.signNotification = option.signNotification;
			if (this.signNotification == 'true') {
				// 获取劳务人员进场告知书
				this.findByUserIdNotification(this.userId);
			}
		},
		methods: {
			//提交
			submit() {
				// 签署进场告知书
				this.$u.api.signUserNotification({
					userId: this.userId,
					image: this.image
				}).then(res => {
					console.log('签署进场告知书', res);
					this.$u.toast(res.message);
					setTimeout(() => {
						uni.navigateBack();
					}, 1500)
				})
			},
			// 获取劳务人员进场告知书
			findByUserIdNotification(userId) {
				this.$u.api.findByUserIdNotification({
					userId: userId
				}).then(res => {
					console.log('获取劳务人员进场告知书', res.data);

					// this.pdfUrl = this.imgUrl + res.data.informImage;

					uni.downloadFile({
						url: this.imgUrl + res.data.informImage,
						success: res => {
							uni.openDocument({
								filePath: res.tempFilePath,
								success: (res) => {
									console.log(res, '文件打开成功');
								}
							})
						}
					})
				})
			},

			// 预览图片
			previewImage(e) {
				console.log(e);
				let imgsArray = [];
				imgsArray.push(e);
				uni.previewImage({
					current: 0,
					urls: imgsArray,
				});
			},
			//删除图片
			del() {
				this.ctx.fillStyle = "#FFFFFF";
				this.ctx.fillRect(0, 0, 347, 380);
				this.image = '';
			},
			//触摸开始，获取到起点
			touchstart: function(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY
				};
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},

			//触摸移动，获取到路径点
			touchmove: function(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY
				};
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}

			},

			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend: function() {
				this.points = [];
			},

			// 绘制笔迹
			draw: function() {
				let point1 = this.points[0]
				let point2 = this.points[1]
				this.points.shift()
				this.ctx.moveTo(point1.X, point1.Y)
				this.ctx.lineTo(point2.X, point2.Y)
				this.ctx.stroke()
				this.ctx.draw(true)
			},

			//清空画布
			clear: function() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.ctx.clearRect(0, 0, canvasw, canvash);
						that.ctx.fillStyle = "#FFFFFF";
						that.ctx.fillRect(0, 0, 347, 380);
						that.ctx.draw(true);
					},
				})
			},

			//完成绘画并保存到本地
			finish() {
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: (res) => {
						let path = res.tempFilePath;
						console.log(path)
						this.uploadFiles(path)
					}
				})
			},

			uploadFiles(file) {
				// uni.setStorageSync('token','eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjEzMzUsInJvbGUiOjAsImlhdCI6MTY0MTM3NjUzNCwiZXhwIjoxNjQzOTY4NTM0fQ.b8l3EEuvPbH5dHbMW04AgXwP4KSrPBfAzDjX3BMbby4')
				uni.uploadFile({
					url: 'https://api.ecowool.com.cn/api/file/upload',
					method: 'POST',
					formData: {
						file: file
					},
					filePath: file,
					name: 'file',
					header: {
						'Authorization': 'U66v7sMAdZvb ' + uni.getStorageSync('token')
					},
					success: res => {
						if (res.statusCode == 200) {
							let data = JSON.parse(res.data).data;
							console.log('图片地址', data.url)
							this.image = data.url

							this.$u.toast('保存成功');
						}
					},
					fail: res => {
						console.log(res)
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #fff;
		min-height: 100vh;
		padding: 0 28rpx;

		.mycanvas {
			width: 694rpx;
			height: 500rpx;
			background-color: #ECECEC;
		}

		.footer {
			width: 694rpx;
			font-size: 24rpx;
			height: 150rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		.left,
		.right {
			line-height: 80rpx;
			height: 80rpx;
			width: 200rpx;
			text-align: center;
			font-weight: bold;
			color: white;
			border-radius: 10rpx;
		}

		.left {
			background: #007AFF;
		}

		.right {
			background: orange;
		}

		.row {
			padding-top: 32rpx;
			border-bottom: solid 2rpx #EBEBEB;

			.head {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;

				.red {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #E81111;
				}
			}

			.body {
				margin-top: 16rpx;
				position: relative;

				/deep/ u-input {
					width: 100%;
				}

				image.icon {
					width: 14.79rpx;
					height: 25.36rpx;
				}
			}
		}

		.no-border {
			border-bottom: none;
			width: 274rpx;
			height: 173rpx;
		}

		.preview-img {
			margin-top: 24rpx;

			.item {
				width: 176rpx;
				height: 176rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.del {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}
			}
		}

		.upload {
			margin-top: 24rpx;
			width: 176rpx;
			height: 176rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.btn-wrap {
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;

			.btn {
				width: 686rpx;
				height: 80rpx;
				background: #30A1FF;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>
